<template>
    <!--弹出层  添加编辑-->
    <el-dialog :visible.sync="visible" width="600px" :before-close="handleClose" append-to-body
        :title="!form.id ? '新增班级' : '编辑班级'">
        <el-form ref="form" :model="form" label-width="80px">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="*班级名称:" prop="class_name">
                        <el-input v-model="form.class_name" placeholder="请输入班级名称" size="small" clearable />
                    </el-form-item>
                </el-col>

                <el-col :span="24">
                    <el-form-item label="上传封面" prop="cover_url">
                        <p>
                            <el-button type="primary" @click="isShowPic = true" size="mini"
                                style="margin-left: 10px;">添加图片
                            </el-button>
                            <span>（支持jpg、png格式，推荐尺寸：400*400）</span>
                        </p>

                        <el-image style="width: 200px;height: 150px;" class="round-image" :src="form.cover_url">
                        </el-image>

                        <select-img :show="isShowPic" @update="cleanDiaglog" :selectType="imgnum" :source="1"
                            @selectSure="selectImgs" :type="0">
                        </select-img>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="老师:" prop="teacher_name" class="demo-form-inline">
                        <el-select size="mini" multiple v-model="form.teacher_ids" placeholder="请选择" filterable
                            clearable>
                            <el-option v-for="item in teacherList" :key="item.id" :label="item.realname"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelForm" size="small">取 消</el-button>
            <el-button type="primary" @click="!form.id ? submitForm('form') : subEditForm('form')" size="small">确
                定</el-button>
        </div>
    </el-dialog>
</template>

<script>

import { getTeacherData } from "@/api/kanke/teacher/teacher";
import { edit, getClassInfo } from "@/api/kanke/gradeclass/gradeclass";
export default {
    name: "AddClass",
    props: {
        visible: {
            type: Boolean,
        },
        id: {
            // type: Number,
            default: 0
        },
        handleReload: {
            type: Function
        }
    },
    data() {
        return {
            teacherList: [],
            form: {
                id: '',
                teacher_ids: '',
                cover_url: '',
                class_name: ''
            },
            isShowPic: false,
            imgnum: 1,
        }
    },
    watch: {
        id: {
            handler(newVal) {
                this.init()
                // if (newVal) {
                //     this.init()
                // }
            },
            immediate: true
        }
    },
    created() {
        this.init(true);
        this.getTeacherData();
    },
    mounted() {
    },
    methods: {
        init() {

            if (this.id) {
                this.loading = true
                getClassInfo({ class_id: this.id }).then(res => {
                    this.loading = false
                    console.log('class detail', res);
                    if (res.code == 200) {
                        this.form = { ...res.data }
                    } else {
                        this.$message.error('获取数据失败')
                    }
                })
            } else {
                this.form = {
                    id: '',
                    teacher_ids: '',
                    cover_url: '',
                    class_name: ''
                }
            }
        },
        getTeacherData() {
            getTeacherData().then((res) => {
                console.log('teacher_data_info', res);
                this.teacherList = res.data.list;
            })
        },
        submitForm(e) {
            console.log(e);
            edit(this.form).then((res) => {
                // console.log(res)
                if (res.code == 200) {
                    this.msgSuccess(res.msg);
                    // this.visible = false;
                    // this.init();
                    this.$emit('update:visible', false);
                    this.$emit('handleReload');
                } else {
                    this.msgError(res.msg);
                }
            })

        },
        subEditForm: function () {
            edit(this.form).then((res) => {
                if (res.code == 200) {
                    this.msgSuccess(res.msg)
                    // this.visible=false;
                    // this.init();
                    this.$emit('update:visible', false);
                    this.$emit('handleReload');
                } else {
                    this.msgError(res.msg);
                }
            })
        },
        handleClose(done) {
            this.$emit('update:visible', false);
        },
        cancelForm() {
            this.$emit('update:visible', false);
        },
        cleanDiaglog() {
            this.isShowPic = false;
        },
        selectImgs(res) {
            this.form.cover_url = res[0].urls
            this.isShowPic = false;
        },
    }
}
</script>

<style lang="scss" scoped>
.demo-form-inline {
    ::v-deep .el-select .el-input {
        width: 200px;
    }
}
</style>